<template>
	<div class="side-menu">
		<a v-for="item in menuList" :key="item.url" :href="item.url" :class="currentUrl === item.url ? 'active' : ''" :title="item.text" class="menu-item">
			<i class="menu-icon" :class="item.icon"></i>
			<span v-if="!isCollapse" class="menu-text">{{item.text}}</span>
		</a>
	</div>
</template>

<script>
	export default{
        props:{
            isCollapse: {
                type: Boolean
            }
        },
		data(){
			return{
			    currentUrl: '',
				menuList: [
					{
					    url: '/collection.html',
						icon: 'icon1',
						text: '数据采集'
					},
                    {
                        url: '/storageExamine.html',
                        icon: 'icon2',
                        text: '入库审核'
                    },
                    {
                        url: '/storageDoc.html',
                        icon: 'icon3',
                        text: '入库文档'
                    },
                    {
                        url: '/quota.html',
                        icon: 'icon4',
                        text: '指标管理'
                    },
                    {
                        url: '/member.html',
                        icon: 'icon5',
                        text: '会员管理'
                    },
                    {
                        url: '/mechanism.html',
                        icon: 'icon6',
                        text: '机构管理'
                    },
                    {
                        url: '/staff.html',
                        icon: 'icon7',
                        text: '员工管理'
                    },
                    {
                        url: '/membershipCard.html',
                        icon: 'icon8',
                        text: '会员卡管理'
                    },
                    {
                        url: '/',
                        icon: 'icon9',
                        text: 'web展现'
                    },
                    {
                        url: 'personalCenter.html',
                        icon: 'icon10',
                        text: '个人中心'
                    },
				]
			}
		},
		mounted(){
		    this.currentUrl = location.pathname;
		},
		components:{
		}
	}
</script>

<style lang="scss">
	.side-menu{
		margin-left: 4px;
		border: 1px solid #eee;
		.menu-item{
			position: relative;
			display: block;
			height: 46px;
			font-size: 14px;
			line-height: 46px;
			color: #808080;
			border-top: 1px solid #eee;
			padding-left: 44px;
		}
		.menu-icon{
			position: absolute;
			width: 22px;
			height: 22px;
			top: 11px;
			left: 16px;
			&.icon1{
				background: url("../../image/menu/icon1.png") no-repeat center center;
			}
			&.icon2{
				background: url("../../image/menu/icon2.png") no-repeat center center;
			}
			&.icon3{
				background: url("../../image/menu/icon3.png") no-repeat center center;
			}
			&.icon4{
				background: url("../../image/menu/icon4.png") no-repeat center center;
			}
			&.icon5{
				background: url("../../image/menu/icon5.png") no-repeat center center;
			}
			&.icon6{
				background: url("../../image/menu/icon6.png") no-repeat center center;
			}
			&.icon7{
				background: url("../../image/menu/icon7.png") no-repeat center center;
			}
			&.icon8{
				background: url("../../image/menu/icon8.png") no-repeat center center;
			}
			&.icon9{
				background: url("../../image/menu/icon9.png") no-repeat center center;
			}
			&.icon10{
				background: url("../../image/menu/icon10.png") no-repeat center center;
			}
		}
		.active{
			background-color: #e5e5e5;

			&::before{
				content: '';
				position: absolute;
				left: -4px;
				top: 0;
				width: 4px;
				height: 100%;
				background-color: #2196f3;

			}
		}
	}
</style>